<template>
  <el-table :data="state.tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
  <input type="file" id="upload" />
  <button @click="getTimes()">获取时长</button>
</template>
 
<script setup>
import { onMounted, reactive } from "vue";
// const getTimes = function () {
function getTimes() {
  var obj_file = document.getElementById("upload");
  var content = obj_file.files[0];
  console.log(content);
  //获取录音时长
  var url = URL.createObjectURL(content);
  //经测试，发现audio也可获取视频的时长
  var audioElement = new Audio(url);

  var duration;
  audioElement.addEventListener("loadedmetadata", function (_event) {
    duration = audioElement.duration;
    console.log(duration);
  });
}
function loadData(data) {
  data.push(
    {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄with setup",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄with setup",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄with setup",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄with setup",
    }
  );
  return data;
}

const state = reactive({ count: 0, tableData: [] });

onMounted(() => {
  loadData(state.tableData);
});
</script>